<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all"/>
    <title>公司角色列表</title>
</head>
<body>
<div style="width: 95%;height: 95%;margin: auto">
    <div>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">角色名称:</lable>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="name" placeholder="搜索角色名称">
                    </div>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" type="button" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary layui-icon layui-icon-refresh-1" type="reset" >重置</button>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green"/>
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"></table>
    </div>
</div>

<script type="text/html" id="allPermTab" >
        <table id="allPerm"></table>
</script>

<script type="text/html" id="headBtns">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
</script>

<script type="text/html" id="rowBtns">
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="perm">
        <i class="layui-icon">&#xe672;</i> 分配权限
    </button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
        <i class="layui-icon">&#xe640;</i> 删除
    </button>
</script>

<script type="text/html" id="editTpl">
    <div style="margin-top: 20px;margin-left: 30px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="name" placeholder="角色名称" lay-verify="required" lay-reqText="角色名称不能为空"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色介绍</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="info" style="width: 190px;height: 150px"></textarea>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.config({base: '${pageContext.request.contextPath}/resources/'})
        .extend({treeTable: 'treetable/treeTable'})
        .use(['table','jquery','layer','form','treeTable'],function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var treeTable = layui.treeTable;
        var insTab = null;
        var t = table.render({
            id:"dataTableId",
            elem:"#dataTable",
            toolbar:'#headBtns',
            page:true,
            height:500,
            url:'${pageContext.request.contextPath}/comp/role/page.do',
            response:{
                "statusCode": 200
            },
            parseData:function(rs){
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                return {
                    "code": rs.code,
                    "msg": rs.msg,
                    "count": rs.data.count,
                    "data": rs.data.data
                }
            },
            cols:[[
                {field:'id',title:'角色ID'},
                {field:'name',title:'角色名称'},
                {field:'info',title:'角色介绍'},
                {title:'操作',toolbar:'#rowBtns',fixed:'right'},
            ]],
        });

        $("#searchBtn").click(function () {
            var name = $("#name").val();
            t.reload({
                where:{
                    name:name,
                    page:1
                }
            });
        });

        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'add'){
                add();
            }
        })

        function add() {
            layer.open({
                title:'编辑',
                type:1,
                content:$("#editTpl").html(),
                area:['360px','340px'],
                success:function (layero,index) {
                    form.on('submit(submitBtnFilter)',function (d) {
                        var data = d.field;
                        updateTable("comp/role/add.do",data,index);
                        return false;//阻止表单默认提交
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }
        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'del'){
                del(d.data);
            } else if(event == 'perm'){
                setRolePerm(d.data);
            }
        })

        function del(data) {
            layer.confirm("确定删除吗?",function (index) {
                updateTable("comp/role/delete.do",{id:data.id},index);
            });
        }

        function updateTable(url,data,index) {
            $.post("${pageContext.request.contextPath}/"+url,data,function (rs) {
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                layer.msg(rs.msg);
                $("#searchBtn").click();
                layer.close(index);
            });
        }

            function setRolePerm(data) {
                var rId = data.id;
                layer.open({
                    title:'分配权限',
                    type:1,
                    content:$("#allPermTab").html(),
                    area:['600px','400px'],
                    success:function (layero,index) {
                        insTab = treeTable.render({
                            elem: "#allPerm",
                            cols: [
                                {type:'checkbox'},
                                {field: 'id', title: 'ID'},
                                {field: 'title', title: '权限名'},
                                {field: 'type', title: '类型',templet:function (d) {
                                        if (d.type == 1){
                                            return "<b style='color:green'>菜单</b>"
                                        }else if(d.type == 2){
                                            return "<b style='color:red'>按钮</b>"
                                        }
                                    }}
                            ],
                            success:function(that){
                                $.get("${pageContext.request.contextPath}/comp/perm/pIds.do",{rId:rId},function (rs) {
                                    var data = rs.data;
                                    var checkbox = new Array();
                                    $.each(data,function (index,value) {
                                        var hasChild = $("tr[data-id='"+value+"']").attr("data-have-child");
                                        if(hasChild == "false"){
                                            checkbox.push(value);
                                        }
                                    });
                                    that.setChecked(checkbox);
                                });
                            },
                            reqData:function(data,callback){
                                $.get("${pageContext.request.contextPath}/comp/perm/list.do",function (rs) {
                                    callback(rs.data);
                                })
                            },
                            tree: {
                                iconIndex: 1, //图标的索引
                                onlyIconControl: true,//仅允许点击图标折叠
                                arrowType: 'arrow1',//箭头类型
                                isPidData: true,//是否是 pid 形式的数据  使用字段表示父子关系
                                pidName: "pId",
                                openName:"spread",//是否展开
                            }
                        });
                    },
                    btn:['确认','取消'],
                    btnAlign:'c',
                    yes:function (index,layero) {
                        var permData = insTab.checkStatus();
                        var param = "";
                        $.each(permData,function (index,value) {
                            param = param + "pId="+value.id+"&";
                        });
                        param = param +"rId="+rId;
                        updateTable("comp/role/setRolePerm.do",param,index)
                    }
                })
            }
    });
</script>
</body>
</html>
